<template>
  <div class="header_top">
    <v-head />
    <!-- 面包屑导航 -->
    <v-bread />
    <!-- 列表 -->
    <div class="join_success">
      <div class="container">
        <div class="pr">
          <div class="ta">
            <div class="icon"><img src="../img/img/icon.png" alt="" /></div>
            <div class="name">恭喜您!活动报名成功!</div>
            <div class="text">
              <p>
                您已经成功支付<span class="c">199.00</span>元
                订单编号:3205421112141100142
              </p>
              <p class="text">
                温馨提示:您支付成功以后，订单状态的更新可能存在延迟，请半小时后再查看订单状态
              </p>
            </div>
            <div class="text2">您还可以</div>
            <div class="ta">
              <div class="more ib"><a href="#">看看其他团队</a></div>
              <div class="more ib"><a href="#">查看我的订单</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 尾部 -->
    <v-foot />
  </div>
</template>

<script>
import vHead from "../websitecom/Head.vue";
import vFoot from "../websitecom/Foot.vue";
import vBread from "../websitecom/Bread.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    vHead,
    vFoot,
    vBread,
    swiper,
    swiperSlide,
  },
  data() {
    return {};
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
    beforeCreate: function () {
    document.getElementsByTagName("body")[0].className = "active";
    document.getElementsByTagName("html")[0].className = "active";
  },

  mounted() {},
};
</script>

<style lang="less" scoped>
html.active  {
  overflow-y: scroll !important;
  height: auto !important;
}
.join_success {
  padding: 6.25rem 0 11.25rem;

  .name {
    font-size: 1.25rem;
    line-height: 2.1875rem;
    color: #4f8df5;
    margin: 2.1875rem 0 1.25rem;
  }

  .text {
    font-size: 1rem;
    line-height: 2.1875rem;
    color: #000000;

    p.text {
      color: #6d6d6d;
    }
  }

  .text2 {
    font-size: 1rem;
    line-height: 2.1875rem;
    color: #4f8df5;
    margin: 1.5625rem 0 1.25rem;
  }

  .more {
    margin: 0 0.75rem;
  }

  .more:nth-child(2) {
    background-color: #888888;
    border-color: #888888;
  }

  .more:hover {
    background-color: #de5044;
    border-color: #de5044;

    a {
      color: #fff;
    }
  }
}
</style>
